<template>
	<view :data-theme="theme()" :class="theme() || ''">
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
			@scrolltolower="scrolltolowerFunc">
			<view class="address-list">
				<view class="address pt26 p-0-26 bg-white" @click="onSelectedStore(item.shopSupplierId)"
					:class="isShopid(item.shopSupplierId) ? 'active' : ''" v-for="(item, index) in storeList"
					:key="index">
					<view class="info flex-1">
						<view class="user f34 d-b-c">
							<view class="d-s-c">
								<view :class="
                    item.shopSupplierId != selectedId
                      ? 'select-id'
                      : 'select-id icon iconfont icon-tijiaochenggong'
                  ">
								</view>
								<view class="f32 fb gray3">{{ item.name }}</view>
							</view>
							<view class="distance"><text>距离:{{ item.distance }}</text></view>
						</view>
						<view class="d-b-c">
							<view class="text-ellipsis f22 gray6">
								{{ item.address }}
							</view>
							<view class="text-ellipsis f22 gray6">
								<text class="icon iconfont icon-time"
									style="color: #333333; font-size: 22rpx; margin-right: 15rpx"></text>
								<text v-if="item.deliveryTimeList.length > 0">{{
                  item.deliveryTimeList[0] + "-" + item.deliveryTimeList[1]
                }}</text>
								<text v-else>24小时</text>
							</view>
						</view>
						<view class="mt16 mb30 d-b-c">
							<view></view>
							<view>
								<text class="shop_status theme-borderbtn" v-if="item.status == 0">营业中</text>
								<text class="shop_status theme-borderbtn" v-else>暂停营业</text>
							</view>
						</view>
					</view>
					<view class="info-right d-b-c">
						<view class="d-s-c gray3">
							<view class="d-s-c" @click.stop="callPhone(item.linkPhone)">
								<view class="icon iconfont icon-002dianhua"></view><text
									class="f26 fb ml18">咨询服务方</text>
							</view>
							<view class="ml25 d-s-c" @click.stop="openmap(item.latitude, item.longitude)">
								<view class="icon iconfont icon-fasong"></view><text class="f26 fb ml18">导航去这里</text>
							</view>
						</view>
						<view class="f26 gray3 theme-btn" @click.stop="onSelectedStore(item.shopSupplierId, true)">去下单
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="storeList.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	//#ifdef H5
	import jweixin from "weixin-js-sdk";
	//#endif
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				/*数据*/
				distance: "",
				loading: true, // 是否正在加载中
				storeList: [], // 门店列表,
				longitude: "",
				latitude: "",
				selectedId: {
					region: {
						city: "",
						storeId: -1,
						distanceUnit: "",
						log: {
							filePath: "",
						},
					},
					storeName: "",
				},
				/* 搜索关键字 */
				storeName: "",
				pageSize: 10,
				lastPage: 0,
				pageIndex: 1,
				/*没有更多*/
				no_more: false,
				scrollviewHigh: 0,
				longitude: "",
				latitude: "",
				selectedId: "",
				signPackages: {},
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.storeList.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			},
		},
		onLoad(options) {},
		onShow() {
			this.restoreData();
			this.getsign();
			this.$nextTick(() => {
				this.getcityData();
			});
		},
		mounted() {
			this.selectedId = uni.getStorageSync("selectedId");
			this.init();
		},
		methods: {
			/*初始化*/
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.scrollviewHigh = res.windowHeight;
					},
				});
			},
			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				self.bottomRefresh = true;
				self.pageIndex++;
				self.loading = true;
				if (self.pageIndex > self.lastPage) {
					self.loading = false;
					self.no_more = true;
					return;
				}
				self.getData();
			},
			getsign() {
				let self = this;
				// #ifdef H5
				self._postBody(
					"index/getSignPackage", {
						url: window.location.href,
						paySource: self.getPlatform(),
					},
					function(res) {
						self.signPackages = res.data.signPackage;
						self.mpSign(res.data.signPackage);
					}
				);
				// #endif
			},
			/*还原初始化*/
			restoreData() {
				this.storeList = [];
				this.search = "";
				this.no_more = false;
				this.pageIndex = 1;
			},

			/*获取定位方式*/
			getcityData() {
				let self = this;
				// 第一次，如果是公众号，则初始化微信sdk配置
				// #ifdef H5
				if (self.isWeixin()) {
					let sign = uni.getStorageSync("sign");
					if (!sign) {
						uni.showLoading({
							title: "加载中",
						});
						self._get(
							"index/index", {
								url: window.location.href,
							},
							function(res) {
								// uni.setStorageSync("sign", self.signPackages);
								sign = self.signPackages;
								uni.hideLoading();
								self.getWxLocation(sign);
							}
						);
					} else {
						self.getWxLocation(sign);
					}
				} else {
					self.getLocation();
				}
				// #endif
				// #ifndef H5
				self.getLocation();
				// #endif
			},
			/*授权启用定位权限*/
			onAuthorize() {
				let self = this;
				uni.openSetting({
					success(res) {
						if (res.authSetting["scope.userLocation"]) {
							self.isAuthor = true;
							setTimeout(() => {
								// 获取用户坐标
								self.getLocation((res) => {});
							}, 1000);
						}
					},
				});
			},
			/*获取用户坐标*/
			getLocation(callback) {
				let self = this;
				uni.getLocation({
					type: "wgs84",
					success(res) {
						self.longitude = res.longitude;
						self.latitude = res.latitude;
						self.getData();
					},
					fail(err) {
						self.getData();
						uni.showToast({
							title: "获取定位失败，请点击右下角按钮打开定位权限",
							duration: 2000,
							icon: "none",
						});
					},
				});
			},
			/* 公众号获取坐标 */
			getWxLocation(signPackage, callback) {
				// #ifdef H5
				let self = this;
				// var jweixin = require("jweixin-module");
				jweixin.config(signPackage);
				jweixin.ready(function(res) {
					jweixin.getLocation({
						type: "wgs84",
						success: function(res) {
							self.longitude = res.longitude;
							self.latitude = res.latitude;
							self.getData();
						},
						fail(err) {
							self.getData();
						},
					});
				});
				jweixin.error(function(res) {
					console.log(res);
				});
				// #endif
			},

			/*获取数据*/
			getData() {
				let self = this;

				self.loading = true;
				uni.showLoading({
					title: "加载中",
				});
				self._postBody(
					"supplier/index/list", {
						longitude: self.longitude || 0,
						latitude: self.latitude || 0,
						pageIndex: self.pageIndex,
						pageSize: self.pageSize,
					},
					function(res) {
						uni.hideLoading();
						self.loading = false;
						self.storeList = self.storeList.concat(res.data.list.records);
						self.lastPage = res.data.list.lastPage;
						if (res.data.list.lastPage <= 1) {
							self.no_more = true;
						}
					}
				);
			},
			chooseLocation() {
				let self = this;
				uni.chooseLocation({
					success: function(res) {
						console.log("位置名称：" + res.name);
						console.log("详细地址：" + res.address);
						console.log("纬度：" + res.latitude);
						console.log("经度：" + res.longitude);
						self.longitude = res.longitude;
						self.latitude = res.latitude;
						self.getrecord();
						self.getData();
					},
				});
			},
			search() {
				let self = this;
				self.loading = true;
				self._get(
					"store/store/lists", {
						storeName: self.storeName,
						longitude: self.longitude,
						latitude: self.latitude,
					},
					function(res) {
						self.loading = false;
						self.storeList = res.data.list;
					}
				);
			},
			/**
			 * 选择门店
			 */
			onSelectedStore(e, flag) {
				let self = this;
				self.selectedId = e;
				uni.setStorageSync("selectedId", self.selectedId);
				if (flag) {
					// #ifndef H5
					uni.navigateBack();
					// #endif
					// #ifdef H5
					history.go(-1);
					// #endif
				}
			},
			getrecord() {
				let self = this;
				let storeId = self.selectedId.storeId;
				self._post(
					"user/storelog/record", {
						storeId: storeId,
						longitude: self.longitude,
						latitude: self.latitude,
					},
					function(res) {
						self.distance = res.data.detail.distanceUnit;
					}
				);
			},
			addSotre(e) {
				let self = this;
				let storeId = e.storeId;
				self._post(
					"user/storelog/add", {
						storeId: storeId,
					},
					function(res) {}
				);
			},
			/* 是否选择 */
			isShopid(id) {
				let s_id = uni.getStorageSync("selectedId");
				return s_id == id;
			},
		},
	};
</script>

<style lang="scss">
	.info {
		margin-left: 20rpx;
	}

	.address-list {
		padding: 2rpx 0 20rpx 0;
	}

	.address-list .address {
		margin-bottom: 22rpx;
	}

	.address-list .address .info-right {
		height: 100rpx;
		border-top: 2rpx solid #eeeeee;
		flex-shrink: 0;
	}

	.foot-btns {
		padding: 0;
	}

	.foot-btns .btn-red {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 0;
	}

	.address_img image {
		width: 154rpx;
		height: 154rpx;
		border-radius: 15rpx;
	}

	.address_tit {
		height: 75rpx;
		line-height: 75rpx;
		color: #959597;
		font-size: 29rpx;
		padding-left: 28rpx;
	}

	.address_btn {
		width: 130rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		text-align: center;
		@include background_color("background_color");
		margin-top: 50rpx;
		color: #ffffff;
	}

	.user {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		margin: 10rpx 0;
	}

	.distance {
		font-size: 22rpx;
		color: #666666;
	}

	.address_search {
		background-color: #f6f6f6;
		width: 460rpx;
		height: 65rpx;
		border-radius: 33rpx;
		margin-left: 29rpx;
		margin-right: 30rpx;
	}

	.address_city {
		display: flex;
		align-items: center;
		margin-left: 33rpx;
	}

	.icon-sousuo {
		margin-left: 22rpx;
		margin-right: 9rpx;
	}

	.icon-jiantoushang {
		font-size: 17rpx;
		display: block;
		transform: rotate(180deg);
		color: #000000;
		margin-left: 22rpx;
	}

	.ml25 {
		margin-left: 25rpx;
	}

	.shop_status {
		padding: 4rpx 8rpx;
		border-radius: 5rpx;
	}

	.shop_status text {
		// color: $dominant-color;
		// border: 1rpx solid $dominant-color;
		padding: 3rpx 8rpx;
		border-radius: 4rpx;
		margin-left: 9rpx;
	}

	.select-id {
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		border: 1rpx solid #d9d9d9;
		box-sizing: border-box;
		margin-right: 24rpx;
	}

	.select-id.icon-tijiaochenggong {
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		@include border_color("border_color");
		@include background_color("background_color");
	}

	.info-right .theme-btn {
		width: 142rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		font-size: 28rpx;
		font-weight: 800;
		color: #ffffff;
	}

	.info-right .icon-fasong {
		width: 51rpx;
		height: 51rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #00cec9;
		color: #ffffff;
		box-shadow: 0px 5rpx 5rpx 0px rgba(0, 206, 201, 0.09);
	}

	.info-right .icon-002dianhua {
		color: #ffffff;
		width: 51rpx;
		height: 51rpx;
		background: #ffcc00;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 5rpx 5rpx 0px rgba(255, 204, 0, 0.09);
		border-radius: 50%;
	}
</style>